<template>
  <div class="body-hp" style="overflow-y:auto;" id="body-hp">
    <HeaDer></HeaDer>
    <div class="banner-hp">
      <img :src="require('../../assets/images/jianshili/hp-banner.jpg')" alt="" />
      <div class="row-hp" style="position: relative;z-index: 1;">
        <dl>
          <dt>产业数字化转型<br>众多企业的共同选择</dt>
          <dd>帮助企业快速搭建内部管理平台和产业链协同制造平台，打通企业<br>内部信息链，价值链上下游深度集成</dd>
        </dl>
      </div>

    </div>
    <div class="row-hp">
      <div class="top-content-hp">
        <div class="column-hp" v-for="item in top_content_hp" :key="item">
          <img :src="item.img" alt="">
          <div class="content-hp">
            <div class="up-hp">
              <b @click="linkEnter(item.txt1)">{{ item.txt1 }}</b>
              <span @click="linkEnter(item.txt1)" style="cursor: pointer;">{{ item.num }}</span>
              <i @click="linkEnter(item.txt1)">{{ item.txt2 }}</i>
            </div>
            <div class="down-hp" @click="linkEnter(item.txt1)">{{ item.txt3 }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="row-hp">
      <div class="txt-center-hp" style="position: relative;">
        <b>服务亮点</b>
        <span @click="goActivity" class="px-more">查看更多></span>
      </div>
    </div>
    <div class="row-hp">
      <ul class="columns-tab-hp">
        <li v-for="item in column_tab_hp"  v-if="column_tab_hp.length > 0"
            :key="item" @click="goActivityDetail(item.activityId)">
          <img :src="item.activityPicture" alt=""  @click="goActivityDetail(item.activityId)"/>
          <div class="content-hp">
            <div class="title-hp" @click="goActivityDetail(item.activityId)">{{ item.activityName }}</div>
            <div class="down-hp">
              <div class="txts-hp">
                <img :src="require('../../assets/images/jianshili/hp-icon1_03.png')" alt="" @click="goActivityDetail(item.activityId)"/>
                <span @click="goActivityDetail(item.activityId)">时间：</span>
                <span @click="goActivityDetail(item.activityId)">{{ item.startTime.slice(0, 10) }}</span>
                <i>到</i>
                <span @click="goActivityDetail(item.activityId)">{{ item.endTime.slice(0, 10) }}</span>
              </div>
              <div class="txts-hp">
                <img :src="require('../../assets/images/jianshili/hp-icon1_06.png')" alt="" />
                <span @click="goActivityDetail(item.activityId)">地点：</span>
                <span @click="goActivityDetail(item.activityId)">{{ item.location }}</span>
              </div>
              <div class="txts-hp">
                <img :src="require('../../assets/images/jianshili/hp-icon1_06.png')" alt="" />
                <span @click="goActivityDetail(item.activityId)">主办单位：</span>
                <span @click="goActivityDetail(item.activityId)">{{ item.sponsor.substring(0,11) }}{{item.sponsor.length>11?'...':''}}</span>
              </div>
            </div>
          </div>
          <div class="bottom-hp">
            <span @click="goActivityDetail(item.activityId)">查看详情</span>
            <i class="el-icon-sort-up"></i>
          </div>
        </li>
      </ul>
    </div>
    <el-empty :image-size="200" style="margin-bottom: 26rem;" v-if="column_tab_hp.length == 0"></el-empty>
    <div class="row-hp">
      <div class="txt-center-hp">
        <b>最新动态</b>
      </div>
    </div>
    <div class="banner2-hp" v-if="banner2_right_li.length > 0">
      <div class="row-hp">
        <div class="left-hp">
          <img :src="img_ba2_hp" alt="">
        </div>
        <div class="right-hp">
          <ul>
            <li v-for="(item, index) in banner2_right_li" :key="item.id" @mouseenter="tabs_img_hp(index)"
                @click="showReleaseDetail(item.id)">
              <div class="left-hp">
                <a title="">{{ item.policyThemes }}</a>
              </div>
              <div class="right-hp">
                <span>{{ item.creationTime }}</span>
              </div>
            </li>
          </ul>
          <a title="" class="btn-hp" @click="showReleaseManagement">
            <span>全部动态</span>
            <i class="el-icon-sort-up"></i>
          </a>
        </div>
      </div>
    </div>
    <el-empty :image-size="200" style="margin-bottom: 26rem;" v-if="banner2_right_li.length == 0"></el-empty>
    <div class="banner3-hp">
      <b>平台功能</b>
      <div class="content-hp">
        <div class="left-hp">
          <p>通过云平台为企业构建相应业务服务平台，统一容纳各要素信息资源，为各企业提供相应信息链路，整合资源，助力企业数字化升级</p>
          <ul class="tabs-ba3-hp" id="tabs-ba3-hp">
            <li v-for="(item, index) in tab_ba3_hp" @click="li_ba3(index, $event)" :class="item.class"
                :key="index">
              <img :src="item.img" alt="">
              <dl>
                <dt class="dt-hover-hp">{{ item.dt }}</dt>
                <dd>{{ item.dd }}</dd>
              </dl>
            </li>
          </ul>
        </div>
        <div class="right-hp">
          <div class="column-hp" v-for="(item, index) in column_ba3_hp" v-show="index == isShow" :key="index">
            <el-carousel indicator-position="outside" :interval="4000" class="column-hp-list">
              <el-carousel-item v-for="(i, index) in item" :key="index">
                <img src="../../assets/images/jianshili/hp-ba3-img1.png" alt=""/>
                <b>{{ i.managementName }}</b>
                <p>{{ i.details }}</p>
<!--                <a title="" @click="goDateil(i)">-->
<!--                  <span>了解详情</span>-->
<!--                  <i class="el-icon-arrow-right"></i>-->
<!--                </a>-->
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <div class="banner4-hp">
      <b>快速查询</b>
      <div class="content-hp">
        <div class="search-container-hp">
          <div class="search-hp">
            <el-input placeholder="请输入搜索内容" v-model="input_search" clearable @clear="handleClear"
                      @change="queryAllWebsite"></el-input>
            <el-button type="success" @click="kscx_hp($event)">搜索</el-button>
          </div>
        </div>
        <div class="tabs-ba4-hp">
          <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
            <el-tab-pane name="first">
							<span slot="label" @click="getHide1_ba4($event)">
								<i class="icon-1-hp"></i>政府官网
							</span>
              <div class="columns-hp">
                <el-carousel arrow="never" :interval="interval" v-if="column1_ba4_hp.length > 0">
                  <el-carousel-item v-for="(item, index) in column1_ba4_hp" :key="index" class="casousel-hp">
                    <ul class="tabs-right-hp">
                      <li v-for="i in item.listitem" :key="i.id"
                          @click="handleWebsiteClick(i.websiteName)">
                        <a>
                          <span>{{ i.titleName }}</span>
                          <i class="el-icon-top-right"></i>
                        </a>
                      </li>
                    </ul>
                  </el-carousel-item>
                </el-carousel>
                <el-empty :image-size="200" v-if="column1_ba4_hp.length == 0"></el-empty>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second">
              <span slot="label" @click="getHide2_ba4($event)"><i class="icon-2-hp"></i>信息服务</span>
              <div class="columns-hp">
                <el-carousel arrow="never" :interval="interval" v-if="column2_ba4_hp.length > 0">
                  <el-carousel-item v-for="(item, index) in column2_ba4_hp" :key="index">
                    <ul class="tabs-right-hp">
                      <li v-for="i in item.listitem" :key="i.id"
                          @click="handleWebsiteClick(i.websiteName)">
                        <a>
                          <span>{{ i.titleName }}</span>
                          <i class="el-icon-top-right"></i>
                        </a>
                      </li>
                    </ul>
                  </el-carousel-item>
                </el-carousel>
                <el-empty :image-size="200" v-if="column2_ba4_hp.length == 0"></el-empty>
              </div>
            </el-tab-pane>
            <el-tab-pane name="third">
              <span slot="label" @click="getHide3_ba4($event)"><i class="icon-3-hp"></i>项目申报</span>
              <div class="columns-hp">
                <el-carousel arrow="never" :interval="interval" v-if="column3_ba4_hp.length > 0">
                  <el-carousel-item v-for="(item, index) in column3_ba4_hp" :key="index">
                    <ul class="tabs-right-hp">
                      <li v-for="i in item.listitem" :key="i"
                          @click="handleWebsiteClick(i.websiteName)">
                        <a>
                          <span>{{ i.titleName }}</span>
                          <i class="el-icon-top-right"></i>
                        </a>
                      </li>
                    </ul>
                  </el-carousel-item>
                </el-carousel>
                <el-empty :image-size="200" v-if="column3_ba4_hp.length == 0"></el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <FooTer></FooTer>
  </div>
</template>

<script>
import { listDeptIndex,listDeptIndexCount } from "@/api/system/dept";
import {listFunctionPublic} from "@/api/platform/function";
import HeaDer from '../../components/HomePage/header'
import FooTer from '../../components/HomePage/footer'
import { publicList } from '@/api/activity/training'
import { listReleaseManagementCommon } from "@/api/release/release";
import { listManagementAll, listManagementOne, listManagementTwo, listManagementThree } from "@/api/website/website";
export default {
  name: "body-hp",
  data() {
    return {
      queryParamWebsiteOne: {
        publisherType: null,
        titleName: null
      },
      queryParamWebsiteTwo: {
        publisherType: null,
        titleName: null
      },
      queryParamWebsiteThree: {
        publisherType: null,
        titleName: null
      },
      queryParamIndustry: {
        pageNum: 1,
        pageSize: 4,
        sendType: null
      },
      index: 0,
      href: "",
      interval: 99999999,
      tabPosition: 'left',
      column_tab_hp: [],
      queryCurrent: {
        pageNum: 1,
        pageSize: 4
      },
      banner2_content_left: [
        {
          title: "8大行业",
          txt: "覆盖垂直领域"
        },
        {
          title: "10000+",
          txt: "企业客户"
        },
        {
          title: "40+",
          txt: "专业领域产品方案"
        }
      ],

      top_content_hp: [
        {
          img: require("../../assets/images/jianshili/hp-img1_03.png"),
          txt1: "工业企业",
          num: "0",
          txt2: "家",
          txt3: "构建企业集群，强化产业链条"
        },
        {
          img: require("../../assets/images/jianshili/hp-img1_05.png"),
          txt1: "服务机构",
          num: "0",
          txt2: "家",
          txt3: "实现企业业务线上化，智能化"
        },
        {
          img: require("../../assets/images/jianshili/hp-img1_07.png"),
          txt1: "园区平台",
          num: "0",
          txt2: "家",
          txt3: "整合企业资源，数据全程掌控"
        }
      ],
      img_ba2_hp: "",
      banner2_right_li: [
      ],
      tab_ba3_hp: [
        {
          class: "on",
          img: require("../../assets/images/jianshili/hp-img2_03.png"),
          dt: "企业",
          dd: "构建企业集群"
        },
        {
          class: "",
          img: require("../../assets/images/jianshili/hp-img2_05.png"),
          dt: "机构",
          dd: "强化产业链条"
        },
        {
          class: "",
          img: require("../../assets/images/jianshili/hp-img2_07.png"),
          dt: "平台",
          dd: "专业领域产品方案"
        }
      ],
      column_ba3_hp: [
        {
          column_ba3item: [
            {
              img: require("../../assets/images/jianshili/hp-ba3-img1.png"),
              b: "荣誉资质",
              p: "荣誉资质管理模块帮助企业高效管理各类资质证书，确保资质的及时更新和合规性，提升企业信誉和市场竞争力。"
            },
            {
              img: require("../../assets/images/jianshili/hp-ba3-img1.png"),
              b: "合作管理",
              p: "合作管理模块优化企业与合作伙伴的协作流程，提升合作效率和满意度，确保项目顺利推进，构建稳固的合作关系。"
            },
            {
              img: require("../../assets/images/jianshili/hp-ba3-img1.png"),
              b: "文控中心",
              p: "文控中心模块为企业提供统一的文档管理平台，确保文档的准确性和一致性，提升运营效率和信息安全。"
            }
          ]
        },
        {
          column_ba3item: [
            {
              img: require("../../assets/images/jianshili/hp-ba3-img2.png"),
              b: "客户管理",
              p: "客户管理模块旨在提升客户关系，通过数据分析和个性化服务，提高客户满意度，增强客户忠诚度，促进业务增长。"
            },
            {
              img: require("../../assets/images/jianshili/hp-ba3-img2.png"),
              b: "供应商管理",
              p: "供应商管理模块优化供应商的选择与评估，确保企业与优质供应商合作，提高供应链效率，实现产品质量与交付保障。"
            },
            {
              img: require("../../assets/images/jianshili/hp-ba3-img2.png"),
              b: "师资管理",
              p: "师资管理模块集中管理企业的师资资源，优化讲师配置，通过培训与评估提升教学质量，保障专业素质和知识传承。"
            }
          ]
        },
        {
          column_ba3item: [
            {
              img: require("../../assets/images/jianshili/hp-ba3-img3.png"),
              b: "平台关系管理",
              p: "平台关系管理模块专注于维护和优化与各类合作伙伴的关系，增强彼此间的信任与协作，提高整体业务效益。"
            },
            {
              img: require("../../assets/images/jianshili/hp-ba3-img3.png"),
              b: "需求发布",
              p: "需求发布模块为企业提供高效的信息发布渠道，便于快速传达需求信息，促进资源的及时对接和市场的有效响应。"
            },
            {
              img: require("../../assets/images/jianshili/hp-ba3-img3.png"),
              b: "活动培训",
              p: "活动培训模块集中组织和管理各类培训活动，提升员工技能与素质，通过系统化培训方案，推动企业人才的持续发展与成长。"
            }
          ]
        },

      ],
      isShow: 0,
      input_search: '',
      activeName: 'first',
      queryParams: {

      },
      column1_ba4_hp: [],
      column2_ba4_hp: [],
      column3_ba4_hp: [],
      box4_hp: []

    };
  },
  components: {
    HeaDer,
    FooTer,
  },

  methods: {
    handleClear() {
      this.getWebsiteOneList();
      this.getWebsiteTwoList();
      this.getWebsiteThreeList();
    },
    showReleaseDetail(releaseId) {
      this.$router.push("/releaseDetail/" + releaseId);
    },
    goActivity(){
      this.$router.push("/hdpxl")
    },
    goActivityDetail(id){
      this.$router.push("/hdpxd?id="+id)
    },
    //机构、企业、平台列表跳转
    goDateil(i) {
      console.log(i)
      if (i.tableName == '机构管理') {
        this.$router.push({path:'/int',query:{activeName:"second"}});
      } else if (i.tableName == '平台管理') {
        this.$router.push({path:'/int',query:{activeName:"third"}});
      } else {
        this.$router.push({path:'/int',query:{activeName:"first"}});
      }
    },
    showReleaseManagement() {
      this.$router.push("/releaseList");
    },
    handleWebsiteClick(url) {
      if (!url.startsWith('http://') && !url.startsWith('https://')) {
        // 如果没有协议，添加默认的http://协议
        url = 'http://' + url;
      } window.open(url, '_blank');
    },
    //平台功能列表
    getFunctionList() {
      listFunctionPublic().then(response => {
        console.log(response)
        this.column_ba3_hp = response;
      });
    },
    getWebsiteOneList() {
      this.column1_ba4_hp = [];
      this.queryParamWebsiteOne.publisherType = "0";
      this.queryParamWebsiteOne.titleName = this.input_search;
      listManagementOne(this.queryParamWebsiteOne).then(response => {
        if (response[0].listitem.length > 0) {
          this.column1_ba4_hp.push(response[0]);
          listManagementTwo(this.queryParamWebsiteOne).then(response => {
            if (response[0].listitem.length > 0) {
              this.column1_ba4_hp.push(response[0]);
              listManagementThree(this.queryParamWebsiteOne).then(response => {
                if (response[0].listitem.length > 0) {
                  this.column1_ba4_hp.push(response[0]);
                }
              });
            }
          });
        }
      });
    },
    getWebsiteTwoList() {
      this.column2_ba4_hp = [];
      this.queryParamWebsiteTwo.publisherType = "1";
      this.queryParamWebsiteTwo.titleName = this.input_search;
      listManagementOne(this.queryParamWebsiteTwo).then(response => {
        if (response[0].listitem.length > 0) {
          this.column2_ba4_hp.push(response[0]);
          listManagementTwo(this.queryParamWebsiteTwo).then(response => {
            if (response[0].listitem.length > 0) {
              this.column2_ba4_hp.push(response[0]);
              listManagementThree(this.queryParamWebsiteTwo).then(response => {
                if (response[0].listitem.length > 0) {
                  this.column2_ba4_hp.push(response[0]);
                }
              });
            }
          });
        }
      });
    },
    getWebsiteThreeList() {
      this.column3_ba4_hp = [];
      this.queryParamWebsiteThree.publisherType = "2";
      this.queryParamWebsiteThree.titleName = this.input_search;
      listManagementOne(this.queryParamWebsiteThree).then(response => {
        if (response[0].listitem.length > 0) {
          this.column3_ba4_hp.push(response[0]);
          listManagementTwo(this.queryParamWebsiteThree).then(response => {
            if (response[0].listitem.length > 0) {
              this.column3_ba4_hp.push(response[0]);
              listManagementThree(this.queryParamWebsiteThree).then(response => {
                if (response[0].listitem.length > 0) {
                  this.column3_ba4_hp.push(response[0]);
                }
              });
            }
          });
        }
      });
    },
    getReleaseIndustryList() {
      listReleaseManagementCommon(this.queryParamIndustry).then(response => {
        this.banner2_right_li = response.rows;
      });
    },
    //获取活动培训接收数量
    getActivityList() {
      publicList(this.queryCurrent).then(res => {
        this.column_tab_hp = res.rows;
        console.log(this.column_tab_hp)
      })
    },
    //获取服务机构数量
    getDeptIndexCount() {
      this.queryParams.type = '1'
      this.queryParams.companyType = '1'//服务机构
      listDeptIndex(this.queryParams).then(response => {
        this.top_content_hp[1].num = response.data.length;
        console.log(response)
      });
    },
    //获取工业企业数量
    getDeptIndexCount2() {
      this.queryParams.type = '1'
      this.queryParams.companyType = '0'//工业企业
      listDeptIndexCount(this.queryParams).then(response => {
        this.top_content_hp[0].num = response.data;
      });
    },
    getDeptIndexCount3() {
      this.queryParams.type = '1'
      this.queryParams.companyType = '2'//园区平台
      listDeptIndex(this.queryParams).then(response => {
        this.top_content_hp[2].num = response.data.length;
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    tab_mouseEnter(e) {
      e.target.className = "on";
      console.log("aaa");
    },
    tab_mouseLeave(e) {
      e.target.className = "";
    },
    showPicture() {
      listReleaseManagementCommon(this.queryParamIndustry).then(response => {
        if (response.rows[0].url == null || response.rows[0].url == "") {
          this.img_ba2_hp = require("../../assets/images/pd-img_18.png");
        } else {
          this.img_ba2_hp = response.rows[0].url;
        }
      });
    },
    linkEnter(tableName){
      if (this.$store.state.user.token!==undefined){
        if (tableName == '服务机构') {
          this.$router.push("/servicelist")
        } else if (tableName == '园区平台') {
          this.$router.push("/platformlist")
        } else {
          this.$router.push("/enrollmentlist")
        }
      }
    },
    tabs_img_hp(index) {
      console.log(index)
      if (this.banner2_right_li[index].url == null || this.banner2_right_li[index].url == "") {
        this.img_ba2_hp = require("../../assets/images/pd-img_18.png")
      } else {
        this.img_ba2_hp = this.banner2_right_li[index].url;
      }
    },
    li_ba3(index, e) {
      this.isShow = index;
      var li = document.getElementById("tabs-ba3-hp").childNodes;
      for (let i = 0; i < li.length; i++) {
        li[i].className = "";
        // console.log(li[i].className)
      }
      e.target.className = "on"
    },
    getHide1_ba4(e) {
      var tabs_ba4 = document.querySelector('.tabs-ba4-hp');
      var el_tab = tabs_ba4.querySelector('.el-tabs__content');
      var el_tabs = el_tab.childNodes;
      var box4 = tabs_ba4.querySelector('#box4-hp');
      box4.style.display = "none";
      for (let i = 0; i < el_tabs.length; i++) {
        el_tabs[1].style.display = "block";
      }
    },
    getHide2_ba4(e) {
      var tabs_ba4 = document.querySelector('.tabs-ba4-hp');
      var el_tab = tabs_ba4.querySelector('.el-tabs__content');
      var el_tabs = el_tab.childNodes;
      var box4 = tabs_ba4.querySelector('#box4-hp');
      box4.style.display = "none";
      for (let i = 0; i < el_tabs.length; i++) {
        el_tabs[2].style.display = "block";
      }
    },
    getHide3_ba4(e) {
      var tabs_ba4 = document.querySelector('.tabs-ba4-hp');
      var el_tab = tabs_ba4.querySelector('.el-tabs__content');
      var el_tabs = el_tab.childNodes;
      var box4 = tabs_ba4.querySelector('#box4-hp');
      box4.style.display = "none";
      for (let i = 0; i < el_tabs.length; i++) {
        el_tabs[3].style.display = "block";
      }
    },
    kscx_hp(e) {
      console.log(this.input_search)
      if (this.input_search != null && this.input_search != "") {
        this.getWebsiteOneList();
        this.getWebsiteTwoList();
        this.getWebsiteThreeList();
      }
    },
    queryAllWebsite() {
      if (this.input_search == null || this.input_search == "") {
        this.getWebsiteOneList();
        this.getWebsiteTwoList();
        this.getWebsiteThreeList();
      }
    },


  },
  created() {
    this.getActivityList();
    this.getWebsiteOneList();
    this.getWebsiteTwoList();
    this.getWebsiteThreeList();
    this.getReleaseIndustryList();
    this.getDeptIndexCount();
    this.getDeptIndexCount2();
    this.getDeptIndexCount3();
    this.showPicture();
    this.getFunctionList();
  }
}
</script>

<style scoped>
/* 头尾公共样式 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 3rem solid #33b843;
  color: #33b843 !important;
}

.el-menu--horizontal>.el-menu-item {
  height: 52rem;
  line-height: 52rem;
  font-size: 22rem;
  font-weight: bold;
  color: #262827;
  padding: 0 4rem;
  margin: 0 20rem;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
  color: #33b843;
}

.row-hp {
  width: 1532rem;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html {
  width: 1920rem;
}

.body-hp {
  height: 100%;
  width: 1920rem;
  /* font: 14rem arial; */
  font-size: 16rem;
  font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;
  color: #676767;
}

/* 头尾公共样式 end*/
.banner-hp {
  width: 100%;
  height: 603rem;
  background-color: #ddd;
  padding-top: 128rem;
  position: relative;
}

.banner-hp>img {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.banner-hp>.row-hp {
  color: white;
  display: block;
}

.banner-hp>.row-hp>dl {
  color: white;
}

.banner-hp>.row-hp>dl>dt {
  font-size: 66rem;
  font-weight: bold;
  margin-bottom: 20rem;
}

.banner-hp>.row-hp>dl>dd {
  font-size: 20rem;
}

.banner-hp>.row-hp>a {
  color: white;
  font-size: 22rem;
  width: 145rem;
  height: 44rem;
  border: solid white 1px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22rem;
  margin-top: 36rem;
}

.banner-hp>.row-hp>a>i {
  font-size: 16rem;
  margin-left: 4rem;
}

.top-content-hp {
  width: 100%;
  height: 141rem;
  position: relative;
  background-color: white;
  box-shadow: 8rem 8rem 12rem rgba(230, 230, 230, .8);
  margin-top: -49rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.top-content-hp>.column-hp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 1000;
}

.top-content-hp>.column-hp>img {
  width: 88rem;
  height: 88rem;
}

.top-content-hp>.column-hp>.content-hp {
  padding-left: 26rem;
  cursor: pointer;
}

.top-content-hp>.column-hp>.content-hp>.up-hp {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.top-content-hp>.column-hp>.content-hp>.up-hp>b {
  font-size: 24rem;
  font-weight: bold;
  color: black;
}

.top-content-hp>.column-hp>.content-hp>.up-hp>span {
  font-size: 36rem;
  font-weight: bold;
  color: #299d60;
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 8rem;
  padding-right: 8rem;
}

.top-content-hp>.column-hp>.content-hp>.up-hp>i {
  font-size: 16rem;
  color: #979797;
  font-style: normal;
}

.top-content-hp>.column-hp>.content-hp>.down-hp {
  color: #7b7b7b;
  font-size: 16rem;
}

.top-content-hp::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  box-shadow: -2rem 8rem 12rem rgba(230, 230, 230, .8);
}

.txt-center-hp {
  width: 100%;
  height: 170rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 32rem;
  font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;
}

.columns-tab-hp {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.columns-tab-hp>li {
  height: 454rem;
  width: 362rem;
  position: relative;
  background-color: #f4f7fc;
  border-radius: 10rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 44rem;
  cursor: pointer;
}

.columns-tab-hp>li:hover .columns-tab-hp>li .title-hp {
  color: #298d36;
}

.columns-tab-hp>li>img {
  width: auto;
  height: 174rem;
  margin-bottom: 35rem;
}

.columns-tab-hp>li>.content-hp {
  width: 100%;
  padding-left: 26rem;
  padding-right: 26rem;
}

.columns-tab-hp>li>.content-hp>.title-hp {
  width: 100%;
  font-size: 20rem;
  overflow-y: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: bold;
}

.columns-tab-hp>li.on>.content-hp>.title-hp {
  color: #298d36;
}

.columns-tab-hp>li>.content-hp>.down-hp {
  width: 100%;
  margin-top: 18rem;
  line-height: 28rem;
}

.columns-tab-hp>li>.content-hp>.down-hp>.txts-hp {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30rem;
}

.columns-tab-hp>li>.content-hp>.down-hp>.txts-hp>img {
  width: 17rem;
  height: 17rem;
  margin-right: 6rem;
  margin-top: 2rem;
}

.columns-tab-hp>li>.content-hp>.down-hp>.txts-hp>i {
  font-style: normal;
  padding-left: 8rem;
  padding-right: 8rem;
}

.columns-tab-hp>li>.bottom-hp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40rem;
  background-color: #26a740;
  border-bottom-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
  font-size: 16rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15rem 0 39rem;
}

.columns-tab-hp>li.on {
  background-color: white;
  animation: move .2s ease-in-out forwards;
}

.columns-tab-hp>li.on::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  box-shadow: -6rem 0 14rem rgba(230, 230, 230, .5);
}

.columns-tab-hp>li.on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  box-shadow: 6rem 0 14rem rgba(230, 230, 230, .5);
}

.columns-tab-hp>li.on>.bottom-hp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.columns-tab-hp>li>.bottom-hp>i {
  transform: rotateY(180deg) rotateZ(-90deg);
}

.columns-tab-hp>li>dl {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 34rem;
  padding-right: 34rem;
}

.columns-tab-hp>li>dl>dt {
  padding: 34rem 0 30rem;
  font-size: 26rem;
}

.columns-tab-hp>li>dl>dd {
  font-size: 16rem;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, -5rem);
  }
}

@keyframes move2 {
  0% {
    display: block;
    transform: translate(0, 0);
    opacity: 0;
  }

  100% {
    transform: translate(30rem, 0);
    opacity: 1;
  }
}

@keyframes move3 {
  0% {
    transform: translate(30, 0);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0);
    opacity: 0;
    display: none;
  }
}

.banner2-hp {
  width: 100%;
  height: 478rem;
  background-color: white;
}

.banner2-hp>.row-hp {
  align-items: unset;
}

.banner2-hp>.row-hp>.left-hp {
  width: 741rem;
  height: 377rem;
  margin-top: 10rem;
}

.banner2-hp>.row-hp>.left-hp>img {
  width: 100%;
  height: 100%;
}

.banner2-hp>.row-hp>.right-hp {
  width: 792rem;
  height: 100%;
  padding-left: 40rem;
}

.banner2-hp>.row-hp>.right-hp>ul {
  width: 100%;
}

.banner2-hp>.row-hp>.right-hp>ul>li {
  width: 100%;
  height: 82rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  padding-left: 8rem;
  padding-right: 8rem;
  border-bottom: solid 1px #ececec;
  justify-content: space-between;
  font-size: 18rem;
  font-weight: bold;
}

.banner2-hp>.row-hp>.right-hp>ul>li:nth-child(1) {
  border-top: solid 1px #ececec;
}

.banner2-hp>.row-hp>.right-hp>ul>li>.left-hp {
  width: 606rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.banner2-hp>.row-hp>.right-hp>ul>li>.left-hp>a:hover {
  color: #298d36;
}

.banner2-hp>.row-hp>.right-hp>ul>li>.right-hp {
  font-weight: 500;
  color: #999999;
}

.banner2-hp>.row-hp>.right-hp>.btn-hp {
  color: #202020;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-left: 11rem;
  margin-top: 16rem;
}

.banner2-hp>.row-hp>.right-hp>.btn-hp>span {
  width: 96rem;
  height: 32rem;
  background: url(../../assets/images/jianshili/hp-bg-btn.png) no-repeat scroll;
  background-size: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #202020;
  margin-right: 2rem;
}

.banner2-hp>.row-hp>.right-hp>.btn-hp>i {
  transform: rotateY(180deg) rotateZ(-90deg);
  font-size: 20rem;
}

/* .moreServices-hp{
	height: 498rem;
	width: 100%;
} */
.banner3-hp {
  background: url(../../assets/images/jianshili/hp-bg1_02.jpg) no-repeat scroll;
  background-size: 100% 100%;
  width: 100%;
  height: 602rem;
}

.banner3-hp>b {
  width: 100%;
  height: 163rem;
  padding-bottom: 24rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rem;
}

.banner3-hp>.content-hp {
  width: 1532rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.banner3-hp>.content-hp>.left-hp {
  width: 747rem;
  padding-top: 32rem;
}

.banner3-hp>.content-hp>.left-hp>p {
  width: 100%;
  padding-right: 50rem;
  overflow-y: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16rem;
  color: black;
  line-height: 26rem;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 50rem;
  justify-content: space-around;
  padding-right: 20rem;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li>img {
  width: 88rem;
  height: 88rem;
  pointer-events: none;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li>dl>dt {
  text-align: center;
  font-size: 33rem;
  font-weight: 600;
  padding-top: 10rem;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li>dl {
  color: black;
  pointer-events: none;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li>dl>dd {
  text-align: center;
  font-size: 16rem;
  font-weight: 600;
  padding-top: 10rem;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li.on>dl>dt {
  color: #299d60;
}

.banner3-hp>.content-hp>.left-hp>.tabs-ba3-hp>li:hover .dt-hover-hp {
  color: #299d60;
}

.banner3-hp>.content-hp>.right-hp {
  width: 754rem;
  height: 350rem;
  border-radius: 8rem;
}

.banner3-hp>.content-hp>.right-hp>.column-hp {
  width: 100%;
  height: 100%;
  border-radius: 8rem;
  /* background: url(../../assets/images/jianshili/hp-img-column_03.png) no-repeat scroll;
  background-size: 100% 100%; */
  background-color: white;
  padding-top: 28rem;
  padding-left: 35rem;
  position: relative; transition: opacity .5s;
}

/* 去除过渡效果 */
.el-carousel__container .el-carousel__item {
  transition: none !important;
}

::v-deep .column-hp .column-hp-list {
  height: 100%;}
::v-deep .column-hp .column-hp-list  img{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 394rem;
  height: 312rem;
  z-index: 0;
}

::v-deep .column-hp .column-hp-list b {
  font-size: 30rem;
  color: #5a5d5a;
  border-bottom: solid 5rem #299d60;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

::v-deep .column-hp .column-hp-list p {
  width: 448rem;
  font-size: 22rem;
  color: #545454;
  font-weight: 500;
  line-height: 36rem;
  overflow-y: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 32rem;
  position: relative;
  z-index: 1;
}

::v-deep .column-hp .column-hp-list p:hover {
  overflow: visible;
  -webkit-line-clamp: unset;
  background: #fff;
  position: absolute;
  width: 448rem;
}

::v-deep .column-hp .column-hp-list a {
  width: 158rem;
  height: 52rem;
  border-radius: 2rem;
  background-color: #299d60;
  display: inline-block;
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30rem;
  position: relative;
  z-index: 1;
}

::v-deep .column-hp .column-hp-list a span {
  font-size: 18rem;
  padding-right: 6rem;
}

::v-deep .column-hp .column-hp-list a i {
  font-size: 14rem;
}
::v-deep .column-hp .el-carousel__container{ height: 100%;}
::v-deep .column-hp .el-carousel__indicators--outside{
  position: absolute;
  bottom: 0;
  left: 0;
}

.banner4-hp {
  width: 100%;
  height: 620rem;
  /* background-color: #eee; */
}

.banner4-hp>b {
  width: 100%;
  height: 133rem;
  font-size: 32rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner4-hp>.content-hp {
  width: 1532rem;
  margin: 0 auto;
  clear: both;
}

.banner4-hp>.content-hp>.search-container-hp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.banner4-hp>.content-hp>.search-container-hp>.search-hp {
  width: 1188rem;
  height: 50rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.banner4-hp>.content-hp>.search-container-hp>.search-hp .el-input {
  width: 1082rem;
  height: 100%;
  font-size: 18rem;
}

::v-deep .banner4-hp>.content-hp>.search-container-hp .el-input__inner {
  height: 100%;
}

.banner4-hp>.content-hp>.search-container-hp>.search-hp .el-button {
  /* padding: 0; */
  width: 100rem;
  height: 100%;
  font-size: 20rem;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner4-hp>.content-hp>.search-container-hp>.search-hp>button {
  background-color: #299d60;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner4-hp>.content-hp>.search-container-hp>.search-hp>button:hover {
  background-color: #3fc17d;
}

.banner4-hp>.content-hp>.tabs-ba4-hp {
  width: 100%;
  height: 420rem;
}

.icon-1-hp {
  width: 43rem;
  height: 41rem;
  background: url(../../assets/images/jianshili/hp-img2_13.png) no-repeat scroll;
  background-size: 100% 100%;
  display: inline-block;
}

.icon-2-hp {
  width: 43rem;
  height: 41rem;
  background: url(../../assets/images/jianshili/hp-img2_16.png) no-repeat scroll;
  background-size: 100% 100%;
  display: inline-block;
}

.icon-3-hp {
  width: 43rem;
  height: 41rem;
  background: url(../../assets/images/jianshili/hp-img2_19.png) no-repeat scroll;
  background-size: 100% 100%;
  display: inline-block;
}

::v-deep .tabs-ba4-hp .el-tabs__item {
  padding: 0;
  width: 260rem;
  height: 100rem;
  border-radius: 60rem;
  display: inline-block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep .tabs-ba4-hp .el-tabs__item.is-active {
  color: #299d60;
  box-shadow: 0 0 12rem #e5e5e5;
}

::v-deep .tabs-ba4-hp .el-tabs__item:hover {
  color: #299d60;
}

::v-deep .tabs-ba4-hp .el-tabs__item>span {
  display: inline-block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rem;
  font-weight: bold;
}

::v-deep .tabs-ba4-hp .el-tabs__item>span>i {
  margin-right: 24rem;
}

::v-deep .tabs-ba4-hp .el-tabs__active-bar {
  display: none;
}

::v-deep .tabs-ba4-hp .el-tabs__nav-wrap::after {
  display: none;
}

::v-deep .tabs-ba4-hp .el-tabs__nav {
  padding: 10rem;
}

.banner4-hp .tabs-ba4-hp .tabs-right-hp {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: rgba(249, 251, 253, 1);
  /* justify-content: space-between; */
}


.banner4-hp .tabs-ba4-hp .tabs-right-hp>li {
  width: 340rem;
  height: 60rem;
  border: solid 1px #bcbcbc;
  border-radius: 1em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 8rem 12rem 23rem;
  position: relative;
  font-weight: bold;
  padding-left: 30rem;
  margin-left: 2px;
  margin-top: 3px;
}

.banner4-hp .tabs-ba4-hp .tabs-right-hp>li>a {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 258rem;
  text-align: center;
}

.banner4-hp .tabs-ba4-hp .tabs-right-hp>li>a>i {
  position: absolute;
  right: 30rem;
  top: 21rem;
  font-size: 19rem;
}

.banner4-hp .tabs-ba4-hp .tabs-right-hp>li:hover {
  border: solid 1px transparent;
  box-shadow: 0 0 10rem rgba(42, 188, 107, .1);
  color: #3fa871;
}

.banner4-hp .tabs-ba4-hp #box4-hp {
  width: 100%;
  height: 360rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background-color: rgba(244, 247, 252, .5);
  border-radius: 10rem;
  margin-top: 6rem;
  display: none;
  padding: 40rem 43rem 0;
  overflow-y: auto;
}

.banner4-hp .tabs-ba4-hp #box4-hp>li {
  width: 340rem;
  height: 60rem;
  border: solid 1px #bcbcbc;
  border-radius: 30rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 8rem 12rem 23rem;
  position: relative;
  font-weight: bold;
  padding-left: 30rem;
}

.banner4-hp .tabs-ba4-hp #box4-hp>li>a {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 258rem;
  text-align: center;
}

.banner4-hp .tabs-ba4-hp #box4-hp>li>a>i {
  position: absolute;
  right: 30rem;
  top: 21rem;
  font-size: 19rem;
}

.banner4-hp .tabs-ba4-hp #box4-hp>li:hover {
  border: solid 1px transparent;
  box-shadow: 0 0 10rem rgba(42, 188, 107, .1);
  color: #3fa871;
}


.banner4-hp .tabs-ba4-hp .el-tabs__item>span {
  width: 100%;
  height: 100%;
}

.banner4-hp .columns-hp {
  width: 100%;
  height: 360rem;
  background-color: rgba(244, 247, 252, .5);
  border-radius: 10rem;
  margin-top: 6rem;
  padding: 40rem 47rem 0;
}

::v-deep .banner4-hp .columns-hp>.el-carousel {
  width: 100%;
  height: 100%;
}

::v-deep .banner4-hp .columns-hp>.el-carousel>.el-carousel__container {
  width: 100%;
  height: 100%;
}

::v-deep .el-tabs--left .el-tabs__header.is-left {
  width: 326rem;
}

::v-deep .banner4-hp .el-carousel__button {
  width: 12rem;
  height: 12rem;
  border-radius: 6rem;
  background-color: #d1d1d1;
  opacity: 1;
}

::v-deep .banner4-hp .el-carousel__indicator.is-active button {
  background-color: #299d60;
}

::v-deep .banner4-hp .el-carousel__indicator--horizontal {
  padding: 15rem 4rem;
}

::v-deep .el-button:active {
  border-color: transparent;
}

.px-more{
  position: absolute;
  right: 0;
  top: 80rem;
  font-size: 14px;
}
.px-more:hover{color:#299D60;cursor: pointer;}
</style>
